<template lang="pug">
  div
    main-logo
    br
    form.main-search-base#coupon-box(@submit.prevent="submitSearch")
      .main-search
        .icon
          img(:src="searchIcon")
        .input
          input(placeholder="输入商品名字搜索", v-model="value")
        .search-btn
          .btn(@click="submitSearch")
            | 搜索
</template>

<script>
import Divider from './Divider'
import searchIcon from '../assets/icons/search.svg'
import MainLogo from './MainLogo'

export default {
  name: 'SearchCoupons',
  components: {
    Divider,
    MainLogo
  },
  data () {
    return {
      searchIcon: searchIcon,
      value: ''
    }
  },
  methods: {
    submitSearch () {
      if (this.value) {
        this.$router.push({name: 'GoodResults', query: {q: this.value}})
      }
    }
  }
}
</script>

<style lang="sass">
@import '../styles/color.sass';

.main-search-base
  background: $white
  padding: 2px 10px
  margin-bottom: 15px
  .main-search
    background: $input-background
    height: 48px
    border-radius: 24px
    overflow: hidden
    display: flex
    flex-direction: row
    justify-content: space-between
    align-items: center
    .icon
      text-align: center
      padding-left: 8px
      width: 30px
      color: $gray
      img
        height: 20px
    .input
      flex: 1 1
      input
        background: $input-background
        border: none
        width: 100%
        padding: 10px 5px
        font-size: .9em
        color: $gray
        &:focus
          outline: none
        &::-webkit-input-placeholder
          color: $gray
    .search-btn
      height: 48px
      background: linear-gradient(to right, $light-blue, $blue)
      line-height: 48px
      padding-right: 10px
      text-align: center
      color: $white
      font-size: .9em
      width: 80px
      .btn
        width: 100%
        height: 100%
        &:hover
          cursor: pointer
</style>
